<script setup>
defineProps({
  title: {
    type: String,
    default: "标题"
  },
  tag: {
    type: String,
    default: "tag"
  },
  value: {
    type: Array,
    default: []
  }
});
</script>
<template>
  <el-card shadow="hover" :body-style="{ padding: '20px' }">
    <template #header>
      <div class="flex justify-between items-center">
        <span>{{ title }}</span>
        <div>
          <el-tag type="danger">{{ tag }}</el-tag>
        </div>
      </div>
    </template>
    <!-- card body -->
    <el-row :gutter="20">
      <el-col :span="6" :offset="0" v-for="(item, index) in value" :key="index">
        <el-card shadow="hover" :body-style="{ padding: '20px' }" class="carde-qd">
          <div class="flex flex-col items-center justify-center cursor-pointer">
            <span>{{ item.value }}</span>
            <p>{{item.label}}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>
<style scoped>
.carde-qd {
  background-color: #f5f5f5;
}
</style>